<template>
  <div>
    <el-form :model="form" ref="form" label-width="140px" label-position="left" class="">
      <div v-for="(fieldset) in fieldsets" :key="fieldset.name" :style="fieldset.style">
        <div style="font-color: black; font-weight:bold; margin-bottom: 10px">{{fieldset.name}}</div>
        <div v-if="(fieldset.childName)" style="font-color: black; font-weight:bold; margin-bottom: 10px">{{fieldset.childName}}</div>
        <template v-for="(field, index) in fieldset.fields">
          <Cloze v-if="field.type === 'cloze'" :form="form" :data="field" :key="index" @value-change="valueChange" />
          <MultipleChoice v-else-if="field.type === 'multiple-choice'" :form="form" :data="field" :key="field.prop" @value-change="valueChange" />
          <el-form-item v-else-if="field.type === 'checkbox-group'" style="margin-bottom: 0px" :label="field.label" :label-width="field.label? '140px': '1px'" :prop="field.prop" :key="field.prop">
            <el-checkbox-group :style="field.style" v-model="form[field.prop]" >
              <el-checkbox v-for="option in field.options" :label="option.value" :key="option.value">
                <Cloze v-if="option.type === 'cloze'" :form="form" :data="option" @value-change="valueChange" />
                <span v-else>
                  {{option.label}}
                </span>  
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item style="margin-bottom: 0px" :label-width="field.labelWidth" v-else :key="field.prop" :label="field.label" :prop="field.prop" :rules="field.rules">
            <el-input size="small" v-model="form[field.prop]" clearable />
          </el-form-item>
        </template>
      </div>
    </el-form>
  </div>
</template>

<script>
import Cloze from "./Cloze.vue";
import MultipleChoice from "./MultipleChoice.vue";

export default {
  name: "preset-form",
  components: {
    Cloze,
    MultipleChoice,
  },
  props: {
    fieldsets: {
      type: Array,
      required: true,
    },
    initialForm: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      form: {},
    };
  },
  methods: {
    valueChange(propName, value) {
      this.$set(this.form, propName, value);
    },
    loop(fields, _form) {
      for (let i = 0; i < fields.length; i++) {
        const el = fields[i];
        if (el.type === "checkbox-group" && !_form[el.prop]) {
          _form[el.prop] = [];
        } else  if (el.prop && !_form[el.prop]) {
          _form[el.prop] = '';
        }
        if (el.fields && el.fields.length) {
          this.loop(el.fields, _form);
        } else if (el.options && el.options.length) {
          this.loop(el.options, _form);
        } 
      }
    }
  },
  created() {
    const _form = {};
    this.loop(this.fieldsets, _form);
    this.form = _form;
  },
  watch: {
    initialForm: function (val) {
      const _form = {...val};
      this.loop(this.fieldsets, _form);
      this.form = _form;
    },
  },
};
</script>

<style>
</style>
